import styles from './cart.less';
import DeleteSvg from '../../assets/svg/delete'

export default function CartCard(props) {
  const cartOperate = (type) => {
    props.cartOperate(type, props.keyValue)
  }
  return (
    <div className={styles.cartCard}>
      <div className={styles.cardImg}>
         <img src={`./productsimg/${props.sku}-1-cart.webp`} width={'100%'}></img>
      </div>
      <div className={styles.cardCon}>
        <div className={styles.cardRow}>
          <div style={{color: '#fff', fontSize: '16px'}}>{props.title}</div>
          <div onClick={() => cartOperate('delete')} style={{cursor: 'pointer'}}>
            <DeleteSvg/>
          </div>
        </div>
        <div className={styles.cardRow} style={{flex: 1, marginTop: '10px'}}>
          <div style={{color: '#5B5A5E'}}><span>{props.availableSize}</span> | <span>{props.style}</span></div>
          <div style={{color: '#EABF00'}}><span>{props.currencyFormat}</span> <span>{props.price}</span></div>
        </div>
        <div className={styles.cardRow} style={{alignItems: 'end'}}>
          <div style={{color: '#5B5A5E'}}>Quantity: {props.quantity}</div>
          <div>
            {
              props.quantity === 1 ? <span className={styles.reduceDis}>一</span> :
              <span className={styles.reduce} onClick={() => cartOperate('reduce')}>一</span>
            }
            <span className={styles.increase} onClick={() => cartOperate('add')}>十</span>
          </div>
        </div>
      </div>
    </div>
  );
}
